'use client'

import { useState, useCallback, useEffect } from 'react'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Progress } from '@/components/ui/progress'
import { Badge } from '@/components/ui/badge'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { Slider } from '@/components/ui/slider'
import { 
  IconUpload, 
  IconFileText, 
  IconChevronRight, 
  IconCheck,
  IconLoader,
  IconX,
  IconEye,
  IconDownload,
  IconBrain,
  IconRobot,
  IconSettings,
  IconTrendingUp,
  IconCpu,
  IconTarget
} from '@tabler/icons-react'
import { api, type FloorPlan } from '@/lib/api'
import { toast } from 'sonner'
import AuthGuard from '@/components/AuthGuard'
<<<<<<< HEAD
=======
import { AI_BASE_URL } from '@/lib/config'
>>>>>>> 2b1414599d9e635ed6f7f739f5d192143c8f58df

interface ImageAnalysis {
  complexity_score: number
  quality_score: number
  room_count: number
  has_text_labels: boolean
  image_size: [number, number]
  noise_level: number
  clarity_score: number
}

interface AnalysisResult {
  file_id: string
  analysis: ImageAnalysis
  recommended_strategy: string
  strategy_description: string
  estimated_processing_time: string
}

interface ModelingRequirements {
  speed_priority: number
  quality_priority: number
  accuracy_priority: number
  automation_level: number
}

interface ProcessingStep {
  id: string
  name: string
  status: 'pending' | 'running' | 'completed' | 'failed'
  icon: React.ReactNode
}

interface Strategy {
  name: string
  display_name: string
  description: string
  features: string[]
  best_for: string
}

export default function IntelligentModelingPage() {
  const [selectedFile, setSelectedFile] = useState<File | null>(null)
  const [uploadedFloor, setUploadedFloor] = useState<FloorPlan | null>(null)
  const [analysisResult, setAnalysisResult] = useState<AnalysisResult | null>(null)
  const [strategies, setStrategies] = useState<Strategy[]>([])
  const [modelingResult, setModelingResult] = useState<any>(null)
  const [isUploading, setIsUploading] = useState(false)
  const [isAnalyzing, setIsAnalyzing] = useState(false)
  const [isModeling, setIsModeling] = useState(false)

  // 建模需求参数
  const [requirements, setRequirements] = useState<ModelingRequirements>({
    speed_priority: 0.3,
    quality_priority: 0.9,
    accuracy_priority: 0.8,
    automation_level: 0.7
  })

  const [steps, setSteps] = useState<ProcessingStep[]>([
    { id: 'upload', name: '1. 上传平面图', status: 'pending', icon: <IconUpload size={20} /> },
    { id: 'analyze', name: '2. 智能分析', status: 'pending', icon: <IconBrain size={20} /> },
    { id: 'configure', name: '3. 参数配置', status: 'pending', icon: <IconSettings size={20} /> },
    { id: 'modeling', name: '4. 智能建模', status: 'pending', icon: <IconRobot size={20} /> },
    { id: 'complete', name: '5. 完成', status: 'pending', icon: <IconCheck size={20} /> }
  ])

  // 获取可用策略
  useEffect(() => {
    const fetchStrategies = async () => {
      try {
        const result = await api.intelligentModeling.getStrategies()
        setStrategies(result.strategies || [])
      } catch (error) {
        console.error('获取策略失败:', error)
      }
    }
    fetchStrategies()
  }, [])

  // 文件拖拽处理
  const handleDragOver = useCallback((e: React.DragEvent) => {
    e.preventDefault()
  }, [])

  const handleDrop = useCallback((e: React.DragEvent) => {
    e.preventDefault()
    const files = Array.from(e.dataTransfer.files)
    const imageFile = files.find(file => file.type.startsWith('image/'))
    
    if (imageFile) {
      setSelectedFile(imageFile)
    } else {
      toast.error('请上传图片文件 (PNG, JPG, JPEG)')
    }
  }, [])

  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (file) {
      setSelectedFile(file)
    }
  }

  // 上传文件
  const handleUpload = async () => {
    if (!selectedFile) return

    setIsUploading(true)
    updateStepStatus('upload', 'running')

    try {
      const floorPlan = await api.floor.upload(selectedFile)
      setUploadedFloor(floorPlan)
      updateStepStatus('upload', 'completed')
      toast.success('文件上传成功！')
      
      // 自动开始分析
      await handleAnalyze(floorPlan.fileId)
      
    } catch (error: any) {
      console.error('上传失败:', error)
      updateStepStatus('upload', 'failed')
      toast.error(error.response?.data?.detail || '上传失败')
    } finally {
      setIsUploading(false)
    }
  }

  // 智能分析
  const handleAnalyze = async (fileId: string) => {
    setIsAnalyzing(true)
    updateStepStatus('analyze', 'running')
    
    toast.info('🧠 AI正在分析您的平面图特征...', {
      duration: 5000,
    })

    try {
      const result = await api.intelligentModeling.analyze(fileId)
      setAnalysisResult(result)
      updateStepStatus('analyze', 'completed')
      updateStepStatus('configure', 'completed') // 自动配置
      toast.success(`分析完成！推荐使用${result.strategy_description}`)
      
    } catch (error: any) {
      console.error('分析失败:', error)
      updateStepStatus('analyze', 'failed')
      toast.error(error.response?.data?.detail || '分析失败')
    } finally {
      setIsAnalyzing(false)
    }
  }

  // 开始智能建模
  const handleStartModeling = async () => {
    if (!uploadedFloor || !analysisResult) return

    setIsModeling(true)
    updateStepStatus('modeling', 'running')

    // 创建虚拟的vector_id（实际项目中应该从矢量化步骤获得）
    const vectorId = `vector_${uploadedFloor.fileId}`

    const modelingParams = {
      file_id: uploadedFloor.fileId,
      vector_id: vectorId,
      speed_priority: requirements.speed_priority,
      quality_priority: requirements.quality_priority,
      accuracy_priority: requirements.accuracy_priority,
      automation_level: requirements.automation_level,
      output_format: 'glb'
    }

    toast.info('🤖 启动智能建模引擎，请稍候...', {
      duration: 10000,
    })

    try {
      const result = await api.intelligentModeling.build(modelingParams)
      
      if (result.model_id) {
        // 轮询建模状态
        pollModelingStatus(result.model_id)
      }
      
    } catch (error: any) {
      console.error('建模启动失败:', error)
      updateStepStatus('modeling', 'failed')
      toast.error(error.response?.data?.detail || '建模启动失败')
      setIsModeling(false)
    }
  }

  // 轮询建模状态
  const pollModelingStatus = async (modelId: string) => {
    const pollInterval = setInterval(async () => {
      try {
        const status = await api.intelligentModeling.getStatus(modelId)
        
        if (status.status === 'completed') {
          clearInterval(pollInterval)
          setModelingResult(status)
          updateStepStatus('modeling', 'completed')
          updateStepStatus('complete', 'completed')
          setIsModeling(false)
          
          toast.success(`🎉 智能建模完成！使用了${status.strategy_used}策略`)
          
        } else if (status.status === 'failed') {
          clearInterval(pollInterval)
          updateStepStatus('modeling', 'failed')
          setIsModeling(false)
          toast.error('建模失败')
        }
        // 如果是processing状态，继续轮询
        
      } catch (error) {
        console.error('获取建模状态失败:', error)
      }
    }, 3000) // 每3秒轮询一次

    // 10分钟后停止轮询
    setTimeout(() => {
      clearInterval(pollInterval)
      if (isModeling) {
        setIsModeling(false)
        toast.error('建模超时，请稍后查看结果')
      }
    }, 600000)
  }

  const updateStepStatus = (stepId: string, status: ProcessingStep['status']) => {
    setSteps(prev => prev.map(step => 
      step.id === stepId ? { ...step, status } : step
    ))
  }

  const getStepIcon = (step: ProcessingStep) => {
    if (step.status === 'running') return <IconLoader size={20} className="animate-spin" />
    if (step.status === 'completed') return <IconCheck size={20} />
    if (step.status === 'failed') return <IconX size={20} />
    return step.icon
  }

  const getStepColor = (status: ProcessingStep['status']) => {
    switch (status) {
      case 'running': return 'text-blue-600 bg-blue-50'
      case 'completed': return 'text-green-600 bg-green-50'
      case 'failed': return 'text-red-600 bg-red-50'
      default: return 'text-gray-600 bg-gray-50'
    }
  }

  const resetProcess = () => {
    setSelectedFile(null)
    setUploadedFloor(null)
    setAnalysisResult(null)
    setModelingResult(null)
    setIsUploading(false)
    setIsAnalyzing(false)
    setIsModeling(false)
    setSteps(prev => prev.map(step => ({ ...step, status: 'pending' })))
  }

  const getStrategyEmoji = (strategy: string) => {
    switch (strategy) {
      case 'mcp_ai': return '🤖'
      case 'hybrid': return '🔀'
      case 'traditional': return '🏗️'
      default: return '⚙️'
    }
  }

  const getScoreColor = (score: number) => {
    if (score >= 0.8) return 'text-green-600'
    if (score >= 0.6) return 'text-yellow-600'
    return 'text-red-600'
  }

  return (
    <AuthGuard>
      <div className="min-h-screen bg-gray-50 p-6">
        <div className="max-w-7xl mx-auto space-y-6">
          {/* 页面标题 */}
          <div className="flex items-center space-x-2 text-sm text-gray-500 mb-4">
            <span>医疗数字孪生</span>
            <IconChevronRight size={16} />
            <span className="text-blue-600">智能建模</span>
          </div>

          <div className="flex items-center justify-between">
            <div>
              <h1 className="text-3xl font-bold text-gray-900">🧠 智能建模工作台</h1>
              <p className="text-gray-600 mt-1">AI自动分析平面图并选择最优建模策略，无需手动选择</p>
            </div>
            {modelingResult && (
              <Button onClick={resetProcess} variant="outline">
                🔄 重新开始
              </Button>
            )}
          </div>

          {/* 系统特性介绍 */}
          <Card className="bg-gradient-to-r from-blue-50 to-cyan-50 border-blue-200">
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <IconBrain className="text-blue-600" size={24} />
                <span>🚀 智能融合建模系统</span>
              </CardTitle>
              <CardDescription>
                不再需要在多个方案中选择，AI会自动分析您的需求并融合最优策略
              </CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                <div className="text-center p-3">
                  <div className="text-2xl mb-2">🔍</div>
                  <div className="font-medium">自动分析</div>
                  <div className="text-xs text-gray-600">分析图片复杂度和质量</div>
                </div>
                <div className="text-center p-3">
                  <div className="text-2xl mb-2">🤖</div>
                  <div className="font-medium">智能选择</div>
                  <div className="text-xs text-gray-600">AI推荐最优策略</div>
                </div>
                <div className="text-center p-3">
                  <div className="text-2xl mb-2">🔀</div>
                  <div className="font-medium">动态融合</div>
                  <div className="text-xs text-gray-600">融合多种技术优势</div>
                </div>
                <div className="text-center p-3">
                  <div className="text-2xl mb-2">⚡</div>
                  <div className="font-medium">自适应优化</div>
                  <div className="text-xs text-gray-600">根据需求调整参数</div>
                </div>
              </div>
            </CardContent>
          </Card>

          {/* 处理流程 */}
          <Card>
            <CardHeader>
              <CardTitle>智能建模流程</CardTitle>
              <CardDescription>AI驱动的自动化建模流程</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="flex items-center justify-between">
                {steps.map((step, index) => (
                  <div key={step.id} className="flex items-center">
                    <div className={`flex items-center space-x-2 px-3 py-2 rounded-lg ${getStepColor(step.status)}`}>
                      {getStepIcon(step)}
                      <span className="text-sm font-medium">{step.name}</span>
                    </div>
                    {index < steps.length - 1 && (
                      <IconChevronRight size={16} className="mx-3 text-gray-400" />
                    )}
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>

          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            {/* 左侧 - 上传和分析 */}
            <div className="space-y-6">
              {/* 文件上传 */}
              <Card>
                <CardHeader>
                  <CardTitle>📤 平面图上传</CardTitle>
                  <CardDescription>支持 PNG、JPG、JPEG 格式，最大 100MB</CardDescription>
                </CardHeader>
                <CardContent>
                  {!selectedFile ? (
                    <div
                      className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-blue-400 transition-colors cursor-pointer"
                      onDragOver={handleDragOver}
                      onDrop={handleDrop}
                      onClick={() => document.getElementById('file-input')?.click()}
                    >
                      <IconUpload size={48} className="mx-auto text-gray-400 mb-4" />
                      <p className="text-lg font-medium text-gray-700 mb-2">
                        拖拽平面图文件到这里
                      </p>
                      <p className="text-gray-500 mb-4">或点击选择文件</p>
                      <input
                        id="file-input"
                        type="file"
                        accept="image/*"
                        onChange={handleFileSelect}
                        className="hidden"
                      />
                      <Button>选择文件</Button>
                    </div>
                  ) : (
                    <div className="space-y-4">
                      <div className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                        <div className="flex items-center space-x-3">
                          <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
                            <IconFileText size={20} className="text-blue-600" />
                          </div>
                          <div>
                            <p className="font-medium">{selectedFile.name}</p>
                            <p className="text-sm text-gray-500">
                              {(selectedFile.size / 1024 / 1024).toFixed(2)} MB
                            </p>
                          </div>
                        </div>
                        <Button
                          onClick={() => setSelectedFile(null)}
                          variant="ghost"
                          size="sm"
                        >
                          <IconX size={16} />
                        </Button>
                      </div>

                      {/* 预览图 */}
                      <div className="border rounded-lg p-2">
                        <img
                          src={URL.createObjectURL(selectedFile)}
                          alt="预览"
                          className="w-full h-48 object-contain bg-gray-50 rounded"
                        />
                      </div>

                      <Button
                        onClick={handleUpload}
                        disabled={isUploading || isAnalyzing || isModeling}
                        className="w-full"
                      >
                        {isUploading ? (
                          <div className="flex items-center">
                            <IconLoader size={16} className="animate-spin mr-2" />
                            上传中...
                          </div>
                        ) : (
                          '🚀 开始智能分析'
                        )}
                      </Button>
                    </div>
                  )}
                </CardContent>
              </Card>

              {/* 智能分析结果 */}
              {analysisResult && (
                <Card>
                  <CardHeader>
                    <CardTitle>🔍 AI分析结果</CardTitle>
                    <CardDescription>
                      平面图特征分析和策略推荐
                    </CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-4">
                      {/* 分析评分 */}
                      <div className="grid grid-cols-2 gap-4">
                        <div className="p-3 bg-blue-50 rounded-lg">
                          <div className="flex items-center justify-between">
                            <span className="text-sm text-blue-600">复杂度</span>
                            <span className={`font-bold ${getScoreColor(analysisResult.analysis.complexity_score)}`}>
                              {(analysisResult.analysis.complexity_score * 100).toFixed(0)}%
                            </span>
                          </div>
                          <Progress 
                            value={analysisResult.analysis.complexity_score * 100} 
                            className="mt-1 h-2" 
                          />
                        </div>

                        <div className="p-3 bg-green-50 rounded-lg">
                          <div className="flex items-center justify-between">
                            <span className="text-sm text-green-600">质量</span>
                            <span className={`font-bold ${getScoreColor(analysisResult.analysis.quality_score)}`}>
                              {(analysisResult.analysis.quality_score * 100).toFixed(0)}%
                            </span>
                          </div>
                          <Progress 
                            value={analysisResult.analysis.quality_score * 100} 
                            className="mt-1 h-2" 
                          />
                        </div>
                      </div>

                      {/* 详细信息 */}
                      <div className="grid grid-cols-3 gap-2 text-sm">
                        <div className="text-center p-2 bg-gray-50 rounded">
                          <div className="font-bold text-gray-900">{analysisResult.analysis.room_count}</div>
                          <div className="text-gray-600">房间数</div>
                        </div>
                        <div className="text-center p-2 bg-gray-50 rounded">
                          <div className="font-bold text-gray-900">
                            {analysisResult.analysis.has_text_labels ? '是' : '否'}
                          </div>
                          <div className="text-gray-600">文字标签</div>
                        </div>
                        <div className="text-center p-2 bg-gray-50 rounded">
                          <div className="font-bold text-gray-900">
                            {(analysisResult.analysis.clarity_score * 100).toFixed(0)}%
                          </div>
                          <div className="text-gray-600">清晰度</div>
                        </div>
                      </div>

                      {/* 推荐策略 */}
                      <div className="p-4 bg-gradient-to-r from-purple-50 to-blue-50 rounded-lg border border-purple-200">
                        <h4 className="font-semibold mb-2 flex items-center">
                          <IconTarget className="mr-2 text-purple-600" size={20} />
                          AI推荐策略
                        </h4>
                        <div className="flex items-center space-x-2 mb-2">
                          <span className="text-2xl">
                            {getStrategyEmoji(analysisResult.recommended_strategy)}
                          </span>
                          <span className="font-medium">{analysisResult.strategy_description}</span>
                        </div>
                        <p className="text-sm text-gray-600">
                          预计处理时间: {analysisResult.estimated_processing_time}
                        </p>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              )}
            </div>

            {/* 右侧 - 参数配置和结果 */}
            <div className="space-y-6">
              {/* 建模参数配置 */}
              {analysisResult && (
                <Card>
                  <CardHeader>
                    <CardTitle>⚙️ 智能参数配置</CardTitle>
                    <CardDescription>
                      AI已根据分析结果优化参数，您可以进一步调整
                    </CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-6">
                      <div>
                        <div className="flex justify-between mb-2">
                          <label className="text-sm font-medium">质量优先级</label>
                          <span className="text-sm text-gray-500">{(requirements.quality_priority * 100).toFixed(0)}%</span>
                        </div>
                        <Slider
                          value={[requirements.quality_priority]}
                          onValueChange={(value) => setRequirements(prev => ({ ...prev, quality_priority: value[0] }))}
                          max={1}
                          min={0}
                          step={0.1}
                          className="w-full"
                        />
                      </div>

                      <div>
                        <div className="flex justify-between mb-2">
                          <label className="text-sm font-medium">精度优先级</label>
                          <span className="text-sm text-gray-500">{(requirements.accuracy_priority * 100).toFixed(0)}%</span>
                        </div>
                        <Slider
                          value={[requirements.accuracy_priority]}
                          onValueChange={(value) => setRequirements(prev => ({ ...prev, accuracy_priority: value[0] }))}
                          max={1}
                          min={0}
                          step={0.1}
                          className="w-full"
                        />
                      </div>

                      <div>
                        <div className="flex justify-between mb-2">
                          <label className="text-sm font-medium">自动化程度</label>
                          <span className="text-sm text-gray-500">{(requirements.automation_level * 100).toFixed(0)}%</span>
                        </div>
                        <Slider
                          value={[requirements.automation_level]}
                          onValueChange={(value) => setRequirements(prev => ({ ...prev, automation_level: value[0] }))}
                          max={1}
                          min={0}
                          step={0.1}
                          className="w-full"
                        />
                      </div>

                      <div>
                        <div className="flex justify-between mb-2">
                          <label className="text-sm font-medium">速度优先级</label>
                          <span className="text-sm text-gray-500">{(requirements.speed_priority * 100).toFixed(0)}%</span>
                        </div>
                        <Slider
                          value={[requirements.speed_priority]}
                          onValueChange={(value) => setRequirements(prev => ({ ...prev, speed_priority: value[0] }))}
                          max={1}
                          min={0}
                          step={0.1}
                          className="w-full"
                        />
                      </div>

                      <Button
                        onClick={handleStartModeling}
                        disabled={!uploadedFloor || !analysisResult || isModeling}
                        className="w-full bg-gradient-to-r from-purple-500 to-blue-500 hover:from-purple-600 hover:to-blue-600"
                        size="lg"
                      >
                        {isModeling ? (
                          <div className="flex items-center">
                            <IconLoader size={20} className="animate-spin mr-2" />
                            智能建模中...
                          </div>
                        ) : (
                          <div className="flex items-center">
                            <IconRobot size={20} className="mr-2" />
                            🚀 启动智能建模
                          </div>
                        )}
                      </Button>
                    </div>
                  </CardContent>
                </Card>
              )}

              {/* 建模结果 */}
              {modelingResult && (
                <Card>
                  <CardHeader>
                    <CardTitle className="text-green-600">
                      🎉 智能建模完成
                    </CardTitle>
                    <CardDescription>
                      AI已使用{modelingResult.strategy_used}策略成功生成3D模型
                    </CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-4">
                      {/* 建模统计 */}
                      <div className="grid grid-cols-2 gap-4 text-center">
                        <div className="p-3 bg-blue-50 rounded-lg">
                          <div className="text-xl font-bold text-blue-600">
                            {modelingResult.strategy_used || 'hybrid'}
                          </div>
                          <div className="text-sm text-blue-700">使用策略</div>
                        </div>
                        <div className="p-3 bg-green-50 rounded-lg">
                          <div className="text-xl font-bold text-green-600">
                            {modelingResult.processing_time ? `${modelingResult.processing_time.toFixed(1)}s` : '已完成'}
                          </div>
                          <div className="text-sm text-green-700">处理时间</div>
                        </div>
                      </div>

                      {/* 增强特性 */}
                      {modelingResult.enhancements && modelingResult.enhancements.length > 0 && (
                        <div>
                          <h5 className="font-medium mb-2">🔧 AI增强特性</h5>
                          <div className="flex flex-wrap gap-2">
                            {modelingResult.enhancements.map((enhancement: string, index: number) => (
                              <Badge key={index} variant="secondary" className="bg-purple-100 text-purple-700">
                                {enhancement}
                              </Badge>
                            ))}
                          </div>
                        </div>
                      )}

                      {/* 优化特性 */}
                      {modelingResult.optimizations && modelingResult.optimizations.length > 0 && (
                        <div>
                          <h5 className="font-medium mb-2">🚀 性能优化</h5>
                          <div className="flex flex-wrap gap-2">
                            {modelingResult.optimizations.map((optimization: string, index: number) => (
                              <Badge key={index} variant="outline" className="bg-green-100 text-green-700">
                                {optimization}
                              </Badge>
                            ))}
                          </div>
                        </div>
                      )}

                      {/* 操作按钮 */}
                      <div className="grid grid-cols-2 gap-3">
                        <Button 
                          onClick={() => {
                            if (modelingResult.glb_url) {
<<<<<<< HEAD
                              window.open(`${process.env.NEXT_PUBLIC_AI_API_BASE_URL || 'http://localhost:8000'}${modelingResult.glb_url}`, '_blank')
=======
                              window.open(`${AI_BASE_URL}${modelingResult.glb_url}`, '_blank')
>>>>>>> 2b1414599d9e635ed6f7f739f5d192143c8f58df
                            }
                          }}
                          disabled={!modelingResult.glb_url}
                          variant="outline"
                        >
                          <IconDownload size={16} className="mr-2" />
                          下载模型
                        </Button>
                        
                        <Button 
                          onClick={resetProcess}
                          variant="outline"
                        >
                          🔄 重新开始
                        </Button>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              )}

              {/* 可用策略信息 */}
              {strategies.length > 0 && !modelingResult && (
                <Card>
                  <CardHeader>
                    <CardTitle>💡 可用建模策略</CardTitle>
                    <CardDescription>
                      AI会自动选择，您无需手动选择
                    </CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-3">
                      {strategies.map((strategy, index) => (
                        <div key={index} className="p-3 border rounded-lg">
                          <div className="flex items-center space-x-2 mb-1">
                            <span className="text-xl">{getStrategyEmoji(strategy.name)}</span>
                            <span className="font-medium">{strategy.display_name}</span>
                          </div>
                          <p className="text-sm text-gray-600 mb-2">{strategy.description}</p>
                          <div className="flex flex-wrap gap-1">
                            {strategy.features.map((feature, idx) => (
                              <Badge key={idx} variant="outline" className="text-xs">
                                {feature}
                              </Badge>
                            ))}
                          </div>
                        </div>
                      ))}
                    </div>
                  </CardContent>
                </Card>
              )}
            </div>
          </div>
        </div>
      </div>
    </AuthGuard>
  )
}